<template>
	<view class="SpikeRecordcollection">
		<view class="SpikeRecordcollection_titleBox">
			<view @click="backReturn" class="SpikeRecordcollection_titleBox_left">
				<image src="../../../static/home/back_White.png" mode="widthFix"></image>
			</view>
			<view class="SpikeRecordcollection_titleBox_text">
				高档防水手表
			</view>
		</view>
		<view class="SpikeRecordcollectionBanner">
			<image src="../../../static/home/detailbanner.jpg" mode="widthFix"></image>
		</view>
		<view class="SpikeRecordcollection_listBox">
			<view v-for="(item,index) in 3" class="SpikeRecordcollection_listBox_list">
				<view class="SpikeRecordcollection_listBox_list_left">
					<image src="../../../static/home/miaoshatu.jpeg" mode=""></image>
				</view>
				<view class="SpikeRecordcollection_listBox_right">
					<view class="SpikeRecordcollection_listBox_right_title">
						高端四件套+高端防水手表+家用电磁炉
					</view>
					<view class="SpikeRecordcollection_listBox_right_bottom">
						<view class="SpikeRecordcollection_listBox_right_bottom_left">
							<view class="SpikeRecordcollection_listBox_right_bottom_left_title">
								VIP秒杀价：
							</view>
							<view class="SpikeRecordcollection_listBox_right_bottom_left_NumBox">
								<view class="SpikeRecordcollection_listBox_right_bottom_left_NumBox_left">
									￥
								</view>
								<view class="SpikeRecordcollection_listBox_right_bottom_left_Num">
									888
								</view>
							</view>
						</view>
						<view class="SpikeRecordcollection_listBox_right_bottom_right">
							秒杀
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onShow: function() {

		},
		methods: {
			backReturn() {
				uni.navigateBack({});
			},
			config() {
				uni.navigateTo({
					url: '/pages/index/SeckillConfirmation/SeckillConfirmation',
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.SpikeRecordcollection {
		padding-bottom: 140upx;

		.SpikeRecordcollection_titleBox {
			background-image: linear-gradient(to right, #FE3D47, #FC773D);
			padding-top: calc(var(--status-bar-height) + 20upx);
			padding-bottom: 20upx;
			display: flex;
			align-items: center;
			position: relative;
			justify-content: center;
			z-index: 1;

			.SpikeRecordcollection_titleBox_left {
				position: absolute;
				left: 0;
				// top: 50%;
				// transform: translateY(-50%);
				top: auto;
				padding: 0 32upx;

				image {
					width: 18upx;

				}
			}

			.SpikeRecordcollection_titleBox_text {
				font-size: 34upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 48upx;
			}
		}

		.SpikeRecordcollectionBanner {
			width: 100%;
			font-size: 0;
			height: 342upx;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			image {
				width: 100%;
			}
		}

		.SpikeRecordcollection_listBox {
			padding: 20upx;

			.SpikeRecordcollection_listBox_list {
				background: #FFFFFF;
				border-radius: 12upx;
				padding: 28upx 40upx;
				display: flex;
				margin-top: 20upx;

				&:first-child {
					margin: 0;
				}

				.SpikeRecordcollection_listBox_list_left {
					width: 162upx;
					height: 162upx;
					font-size: 0;
					overflow: hidden;
					border-radius: 8upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.SpikeRecordcollection_listBox_right {
					width: calc(100% - 162upx - 50upx);
					margin-left: 50upx;

					.SpikeRecordcollection_listBox_right_title {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.89);
						line-height: 40upx;
					}

					.SpikeRecordcollection_listBox_right_bottom {
						width: 100%;
						height: 88upx;
						background: rgba(255, 190, 83, 0.6);
						border-radius: 12upx;
						margin-top: 20upx;
						display: flex;
						justify-content: space-between;

						.SpikeRecordcollection_listBox_right_bottom_left {
							padding: 0 20upx;
							padding-top: 8upx;
							.SpikeRecordcollection_listBox_right_bottom_left_title {
								font-size: 22upx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: rgba(0, 0, 0, 0.9);
								line-height: 32upx;
							}

							.SpikeRecordcollection_listBox_right_bottom_left_NumBox {
								display: flex;
								align-items: center;

								.SpikeRecordcollection_listBox_right_bottom_left_NumBox_left {
									font-size: 24upx;
									color: #ED2525;
								}

								.SpikeRecordcollection_listBox_right_bottom_left_Num {
									font-size: 36upx;
									font-family: PingFangSC-Semibold, PingFang SC;
									font-weight: 600;
									color: #ED2525;
									line-height: 50upx;
								}
							}
						}

						.SpikeRecordcollection_listBox_right_bottom_right {
							width: 166upx;
							height: 100%;
							background: #ED2525;
							border-radius: 12upx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 34upx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
							line-height: 48upx;
						}
					}
				}
			}
		}

	}
</style>
<style>
	page {
		background-color: #E3E5E8;
	}
</style>
